<template>
    <div>
        <h3>商品分类</h3>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 添加分类按钮区域 -->
            <el-row>
                <el-col>
                    <el-button type="primary" @click="btnAdd">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 添加分类弹窗 -->
            <el-dialog title="添加分类" :visible.sync="showDialog" width="50%" @close="btncancel">
              <!-- 添加分类表单 -->
                <!-- 添加分类表单 -->
         <el-form   label-width="100px" :model="addForm" :rules="rules">
        <el-form-item label="分类名称" prop="cat_name">
      <el-input v-model="addForm.cat_name" ></el-input>
      </el-form-item>
    <el-form-item label="父级分类" prop="cat_pid">
      <div class="block">
        <!-- 子级数据下拉框 -->
    <el-cascader
     expandTrigger='hover'
     v-model="selectedKeys" 
      :options="parentList"
      :props="caderProps" 
      @visible-change="parentChange"
       clearable change-on-select>
       </el-cascader>
</div>
    </el-form-item>
    </el-form>
              <!-- 添加分类表单/ -->
            <!-- 确定删除按钮 -->
            <span slot="footer" class="dialog-footer">
    <el-button @click="btncancel">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
            <!-- 确定删除按钮/ -->
            </el-dialog>
            <!-- 添加分类弹窗/ -->
            <!-- 分类表格  -->
<tree-table :data="cateList" :columns="columns" :selection-type="false"
:expand-type="false" show-index index-text="#" border :show-row-hover="false">
  <template slot="isok" slot-scope="scope">
   <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color:green"></i>
   <i class="el-icon-error" v-else style="color:red"></i>
  </template>
  <!-- 排序 -->
  <template  slot="order" slot-scope="scope">
      <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
  <el-tag size="mini" type="success" v-else-if="scope.row.cat_level===1">二级</el-tag>
  <el-tag size="mini" type="warning" v-else>三级</el-tag>
  </template>
  <!-- 操作 -->
  <template slot="opt">
    <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
  <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button> 
  </template>
</tree-table>
            <!-- 分页 -->
   <el-pagination 
   @size-change="handleSizeChange" 
   @current-change="handleCurrentChange" 
   :current-page="queryInfo.pagenum" 
   :page-sizes="[3, 5, 10, 15]" 
   :page-size="queryInfo.pagesize" 
   layout="total, sizes, prev, pager, next, jumper"
   :total="total">
  </el-pagination>
        </el-card>
    </div>
</template>
<script>
// 引入封装的商品分类的数据
import {getCateList} from "../../network/goods/addGood"
// 引入封装的添加分类接口
// import {addForm} from "../../network/goods/addGood"
export default {
  data() {
    return {
      // 商品分类数据列表
      cateList: [],
      //查询分类数据的条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      //保存总数据条数
      total: 0,
      // 放取头部信息
      columns: [
     {label:'分类名称',prop:'cat_name'},
    //type:'template'(将该列设置为模板列)，template:'isok'(设置该列模板的名称为isok)
    {label:'是否有效',prop:'',type:'template',template:'isok'},
    {label:'排序',prop:'',type:'template',template:'order'},
    {label:'操作',prop:'',type:'template',template:'opt'}
],
showDialog:false, //默认添加分类弹窗不显示
// 添加分类接口数据
  addForm:{
      cat_pid:0, // 分类父 ID
      cat_name:'',	 //分类名称	
      cat_level:0	 // 分类层级
  },
  // 表单验证
  rules:{
    cat_name:[{required:true,trigger:'blur',message:"请输入分类名称"}]
  },
  // 存储父类数据,数据源
  parentList:[],
   // 指定级联选择器的配置对象
    caderProps:{
     value:'cat_id', // 指定选项的值为选项对象的某个属性值
     label:' cat_name', // 指定选项标签为选项对象的某个属性值
     children:'children' // 指定选项的子选项为选项对象的某个属性值
    },
    // 选定的父级分类的id数组
    selectedKeys:[]
    }
   
  },
  created() {
    this.getCateList()
  },
  methods: {
    async getCateList() {
      //获取商品分类数据
      const { data } = await getCateList(this.queryInfo)
      //将数据列表赋值给cateList
      this.cateList = data
      //保存总数据条数
      this.total =data.total
    },
    // 改变的时候会触发每页条数
    handleSizeChange(newSize){
      // 里面的参数代表正在点击的页数赋值给userinfo里面
      this.queryInfo.pagesize=newSize
      // 重新调取接口渲染页面
      this.getCateList()
    },
    // 当前页改变的时候触发
    handleCurrentChange(newPage){
      this.queryInfo.pagenum=newPage
      // 重新调取接口渲染页面
      this.getCateList()
    },
    // 关闭按钮
    btncancel(){
      // 让当前弹窗关闭
      this.showDialog=false
    },
    // 点击添加分类
    btnAdd(){
      // 渲染页面获取数据
      this.getCateList()
      // 展示弹层
      this.showDialog=true
      
    },
    // 点击确定按钮
    addCate(){
      // 关闭弹窗
      this.showDialog=false
      // 提示信息
      this.$message.success('添加成功')
    },
    // 父类触发添加分类事件
   async parentChange(){
     const {data:res} =await getCateList(this.queryInfo)
     this.parentList=res
     this.cat_name=res.cat_name
    }
  },
}
</script>